<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flv</title>
    <style>
        .video {
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <video class="video" muted autoplay controls ref="player"></video>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
<script>
    init();
    function init() {
        // 如果浏览器支持flvjs，则执行相应的程序
        if (flvjs.isSupported()) {
            console.log('支持flv')
            // 准备监控设备流地址
            const url = 'rtsp://127.0.0.1:554/easy.mp4'
            // const url = this.sourceUrl;
            // 创建一个flvjs实例
            // 下面的ws://localhost:8888换成你搭建的websocket服务地址，后面加上设备流地址
            this.player = flvjs.createPlayer({
                type: 'flv',
                isLive: true,
                url: 'ws://localhost:8888/' + url
            })

            this.player.on('error', (e) => {
                console.log(e)
            })

            // 将实例挂载到video元素上面
            this.player.attachMediaElement(document.querySelector('.video'))

            try {
                // 开始运行加载 只要流地址正常 就可以在h5页面中播放出画面了
                this.player.load()
                this.player.play()
            } catch (error) {
                console.log(error)
            }
        }
    }
</script>